<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>路口信控数智融合AI决策系统</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            background-color: #f5f5f5;
        }
        
        .header {
            background-color: #1e88e5;
            color: white;
            padding: 0 20px;
            height: 60px;
            line-height: 60px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .logo {
            font-size: 20px;
            font-weight: bold;
            float: left;
        }
        
        .user-info {
            float: right;
        }
        
        .main-container {
            display: flex;
            margin-top: 60px;
            height: calc(100vh - 60px);
        }
        
        .sidebar {
            width: 200px;
            background-color: #2c3e50;
            color: white;
            height: 100%;
            overflow-y: auto;
        }
        
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .sidebar-menu li {
            border-bottom: 1px solid #34495e;
        }
        
        .sidebar-menu li a {
            display: block;
            padding: 15px 20px;
            color: #ecf0f1;
            text-decoration: none;
            transition: all 0.3s;
        }
        
        .sidebar-menu li a:hover, 
        .sidebar-menu li a.active {
            background-color: #1e88e5;
        }
        
        .content-area {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            background-color: #f5f5f5;
        }
        
        .iframe-content {
            width: 100%;
            height: calc(100vh - 120px);
            border: none;
            background-color: white;
            border-radius: 4px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="logo">路口信控数智融合AI决策系统V1.0</div>
        <div class="user-info">
            <span>管理员</span>
            <span style="margin-left: 15px; cursor: pointer;" id="logout">退出</span>
        </div>
    </div>
    
    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧菜单栏 -->
        <div class="sidebar">
            <ul class="sidebar-menu">
                <li><a href="#" data-src="dashboard.html" class="active">数据看板</a></li>
                <li><a href="#" data-src="data_input.html">数据采集</a></li>
                <li><a href="#" data-src="ai_analysis.html">AI分析</a></li>
                <li><a href="#" data-src="data_view.html">数据展示</a></li>
                <li><a href="#" data-src="settings.html">系统设置</a></li>
            </ul>
        </div>
        
        <!-- 主内容区 (iframe) -->
        <div class="content-area">
            <iframe id="mainFrame" class="iframe-content" src="dashboard.html"></iframe>
        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.use(['element'], function(){
            var element = layui.element;
            
            // 菜单点击事件
            document.querySelectorAll('.sidebar-menu a').forEach(function(item) {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有激活状态
                    document.querySelectorAll('.sidebar-menu a').forEach(function(el) {
                        el.classList.remove('active');
                    });
                    
                    // 添加当前激活状态
                    this.classList.add('active');
                    
                    // 获取目标页面
                    var src = this.getAttribute('data-src');
                    
                    // 设置iframe的src
                    document.getElementById('mainFrame').src = src;
                });
            });
            
            // 退出按钮点击事件
            document.getElementById('logout').addEventListener('click', function() {
                layer.confirm('确定要退出系统吗？', {
                    icon: 3,
                    title: '提示'
                }, function(index) {
                    layer.close(index);
                    // 这里可以添加退出逻辑，比如跳转到登录页
                    window.location.href = 'login.html';
                });
            });
        });
    </script>
</body>
</html>